<template>
  <div class="mod-menu">
    <el-table :data="dataList" border style="width:100%;">
      <el-table-column prop="menuId" width="80" label="ID"></el-table-column>
      <!-- 用于显示层次结构的按钮 -->
      <table-tree-column prop="name" header-align="center" treeKey="menuId" width="150" label="名称"></table-tree-column>
      <el-table-column
        prop="parentName"
        header-align="center"
        align="center"
        width="120"
        label="上级菜单"
      ></el-table-column>
      <el-table-column header-align="center" align="center" label="图标">
        <template slot-scope="scope">
          <icon-svg :name="scope.row.icon || ''"></icon-svg>
        </template>
      </el-table-column>
      <el-table-column prop="type" header-align="center" align="center" label="类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type === 0" size="small">目录</el-tag>
          <el-tag v-else-if="scope.row.type === 1" size="small" type="success">菜单</el-tag>
          <el-tag v-else-if="scope.row.type === 2" size="small" type="info">按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="orderNum" header-align="center" align="center" label="排序号"></el-table-column>
      <el-table-column
        prop="url"
        header-align="center"
        align="center"
        width="150"
        :show-overflow-tooltip="true"
        label="菜单URL"
      ></el-table-column>
      <el-table-column
        prop="perms"
        header-align="center"
        align="center"
        width="150"
        :show-overflow-tooltip="true"
        label="授权标识"
      ></el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="isAuth('sys:menu:update')"
            type="text"
            size="small"
            @click="addOrUpdateHandle(scope.row.menuId)"
          >修改</el-button>
          <el-button
            v-if="isAuth('sys:menu:delete')"
            type="text"
            size="small"
            @click="deleteHandle(scope.row.menuId)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
// 数据转换一下（平面数据处理）
import { treeDataTranslate } from '@/utils'
// 树形扩展组件
import TableTreeColumn from '@/components/table-tree-column'
export default {
  data () {
    return {
      // 表格绑定数据
      dataList: [],
      dataListLoading: false
    }
  },
  components: {
    TableTreeColumn

  },
  activated () {
    this.getDataList()
  },
  methods: {
    getDataList () {
      this.dataListLoading = true
      this.service.getExampleMenuList().then(res => {
        // 数据先处理
        let dataTemp = treeDataTranslate(res.data, 'menuId')
        console.log('转换后的数据：', dataTemp)
        this.dataList = dataTemp
      }).then(() => {
        this.dataListLoading = false
      })
    }
  }
}
</script>
<style scoped>
</style>
